<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.21/dist/css/layui.css" rel="stylesheet">
    <style>
        .xx {
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .img {
            height: 150px;
            text-align: center;
            line-height: 100px;
        }

        img {
            width: 130px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">商城</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item"><a href="./首页/首页.html">返回主页</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">详情</button>
                </blockquote>
                <div class="layui-card layui-panel">
                    <ul class="xq">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var arr = location.search
        console.log(arr);
        var index = arr.indexOf('=')
        var arrid = arr.slice(index + 1, arr.length)
        console.log(arrid);
        
        $.ajax({
            type: 'get',
            url: 'https://liu.zzgoodqc.cn/goodsx/detail?id=' + arrid,
            dataType: 'json',
            success: (data) => {
                var a = data.data
                $('.xq').append(`
                    <li class="xx">编号：${a.id}</li>
                    <li class="xx">商品名：${a.goods_name}</li>
                    <li class="xx">库存：${a.stock}&emsp;个</li>
                    <li class="xx">价格：${a.price}&emsp;元</li>
                    <li class="xx">已售：${a.sold}&emsp;个</li>
                    <li class="img">图片详情：<img src="${a.img}"></li>
                    `)
            },
            error: (e) => {
                console.log(e);
            }
        })
    </script>
</body>

</html>